<template>
	<view class="sa-sell" @click="clickItem(itemData.id)">
		<view class="sa-sell-border"><view class="sa-sell-img" :style="{ backgroundImage: 'url( ' + itemData.img + ' )' }"></view></view>
		<view class="sa-sell-bottom-card">
			<view class="sa-sell-name">{{ itemData.title }}</view>
			<view class="sa-sell-price-container">
				<view>
					<text class="unit">￥</text>
					<text class="price">{{ itemData.price }}</text>
				</view>
				<view>
					<text class="orginal-price">￥{{ itemData.orginalPrice }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'homeSell',
	props: {
		itemData: {
			Id: {
				type: String,
				default: ''
			},
			Name: {
				type: String,
				default: ''
			},
			Img: {
				type: String,
				default: ''
			},
			OrginalPrice: {
				type: String,
				default: ''
			},
			Price: {
				type: String,
				default: ''
			},
			ShortTitle: {
				type: String,
				default: ''
			}
		}
	},
	methods: {
		clickItem(item_id) {
			this.$parent.clickProductItem(item_id);
		}
	}
};
</script>

<style scoped lang="scss">
.sa-sell {
	position: relative;
	width: 100%;
	height: 498rpx;
	border-radius: 20rpx;
	// box-shadow: 0rpx 4rpx 8rpx rgba(68, 68, 68, 0.16);
	margin-right: 20rpx;
	background-color: #FFFFFF;
	.sa-sell-border {
		width: 100%;
		height: 358rpx;
	}
	&-img {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.sa-sell-bottom-card {
		width: 100%;
		height: 138rpx;
		color: $main-text-color-gray-33;

		.sa-sell-name {
			font-size: $main-text-size-30;
			margin-left: 16rpx;
			margin-top: 20rpx;
			font-family: 'SourceHanSansCN-Medium';
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 94%;
		}

		.sa-sell-price-container {
			display: flex;
			margin-left: 16rpx;
			margin-top: 10rpx;
			font-family: 'SourceHanSansCN-Regular';
			align-items: baseline;
			.unit {
				color: $main-text-color-main-orange;
				font-size: $main-text-size-24;
			}
			.price {
				color: $main-text-color-main-orange;
				font-size: $main-text-size-34;
				font-family: 'SourceHanSansCN-Medium';
			}
			.orginal-price {
				margin-left: 10rpx;
				color: $main-text-color-grey;
				font-size: $main-text-size-24;
				text-decoration: line-through;
			}
		}
	}
}
</style>
